<template>
  <div class="main">
    <home-header></home-header>
    <home-content :channel="channel"></home-content>
    <home-footer></home-footer>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed, onBeforeMount } from "vue";
import { mockApi, checkBrowser, detectDevice } from "@/utils/util";
import { useRoute, useRouter } from "vue-router";
import homeContent from "./moduels/homeContent.vue";
import homeHeader from "./moduels/homeHeader.vue";
import homeFooter from "./moduels/homeFooter.vue";
import { countPv } from "@/api/channel";
import { showToast } from "vant";

const route = useRoute();
const router = useRouter();

// const { channel } = route.query;

const channel = computed(
  (): string => (route.query.channelCode as string) || "1"
);

onBeforeMount(() => {
  console.log("browser type: ", checkBrowser());
  const browserType = checkBrowser();
  if (browserType === "WeChat Browser") {
    // 微信打开落地页跳转引导图
    // useRouter().push("/guideWechat");
  }
  console.log(`当前页面在 ${browserType} 中打开`);
});

onMounted(async () => {
  console.log("channel: ", channel.value);
  if (channel) {
    const res = await countPv({ channelCode: channel.value });
    console.log(res);
  } else {
    showToast("没有渠道商来源！");
  }
});
</script>

<style lang="scss" scoped>
.main {
  background-color: #f6f5f5;
  padding: 15px;
  width: 100%;
  // height: auto;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("@/assets/channel/bg.png");
}
</style>
